<template>
    <!-- 对话框表单 -->
    <!-- 建议使用 Prettier 格式化代码 -->
    <!-- el-form 内可以混用 el-form-item、FormItem、ba-input 等输入组件 -->
    <el-dialog
        class="ba-operate-dialog"
        :close-on-click-modal="false"
         v-model="dialogVisible"
        width="50%"
        >   
        <template #header>
            <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">
                 添加
            </div>
        </template>
        <el-scrollbar v-loading="loading" class="ba-table-form-scrollbar">
            <div
                class="ba-operate-form"
            >
                <el-form
                    ref="formRef"
                >
                    <el-form-item label="用户名" prop="username" >
                        <el-input v-model="username" placeholder="请输入用户名" />
                    </el-form-item>
                    
                </el-form>
            </div>
        </el-scrollbar>
        <template #footer>
            <div style="padding: 0 120px;">
                <el-button >取消</el-button>
                <el-button v-blur  type="primary">
                   保存
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script>
    export default {
        data() {
            return {
                loading: false,
                username: '',
                dialogVisible: false,
            }
        },
        props: {
            
        },
    }
</script>
  

<style scoped lang="scss">
    .ba-table-form-scrollbar{
        padding: 0 120px;
    }
</style>
